<template>
  <a-modal
    title="修改物流"
    :confirm-loading="sendModalLoading"
    :mask-closable="false"
    :destroy-on-close="true"
    :visible="visible"
    @ok="send"
    @cancel="$emit('update:visible', false)"
  >
    <template v-for="item in transOrderList">
      <div class="content" v-for="(el, inx) in item.goods_info" :key="inx">
        <div class="img">
          <a-avatar shape="square" :size="48" icon="user" :src="el.goods_pic || el.pic" />
        </div>

        <div class="txt">
          <h3>{{ el.name }}</h3>
          <p>
            规格：{{ el.attr_list ? el.attr_list.map((e) => e.attr_name).join() || '默认' : '默认' }} 数量：x{{
              el.num || 0
            }}
          </p>
        </div>
      </div>
    </template>

    <a-tabs :default-active-key="1" v-model="activeKey">
      <a-tab-pane tab="快递" key="1">
        <a-form-item
          >快递公司：
          <a-select style="width: 150px" placeholder="请选择" v-model="express.selectExpress">
            <a-select-option :value="index" v-for="(item, index) of expressList" :key="index">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item> 快递单号：<a-input v-model="express.express_no" /> </a-form-item>
      </a-tab-pane>
      <a-tab-pane tab="无需物流" key="0"> </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { setExpressNo } from '@/api/order'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    expressList: {
      type: Array,
      default: () => [],
    },
    orderId: {
      type: String,
      default: '',
    },
    orderInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      activeKey: '1',
      express: {
        words: '',
        express_no: '',
      },
      sendModalLoading: false,
      showNotive: false,

      transOrderList: [],
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val && this.orderInfo?.id) {
        let haveExpress = this.orderInfo.goods_list.some((d) => {
          return d.delivery_type == '0'
        })
        let haveShop = this.orderInfo.goods_list.some((d) => {
          return d.delivery_type == '1'
        })
        // 如果有物流和门店自提订单时，发货时需要提醒该订单包含门店自提
        if (haveExpress && haveShop) {
          this.showNotive = true
        }
      }
    },
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    send() {
      const hide = this.$message.loading('修改中...', 0)
      var params = {
        order_id: this.orderId,
      }
      if (this.activeKey === '1') {
        params.is_express = 1
        params.express = this.expressList[this.express.selectExpress]
        params.express_no = this.express.express_no
      } else {
        params.is_express = 0
      }
      setExpressNo(params).then((res) => {
        hide()
        if (res.code === 0) {
          this.$message.success('修改成功！')
          this.$emit('update:visible', false)
          this.$emit('onAfterClose')
        } else {
          this.$error({
            content: res.msg,
          })
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  height: 48px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
